<template>
  <van-field
    v-if="h5"
    v-model="valueTxt"
    :is-link="!isDetail"
    readonly
    :name="item.options && item.options.name"
    :label="item.options && item.options.label"
    :disabled="item.options && item.options.disabled"
    :placeholder="isDetail ? '' : item.options && item.options.placeholder"
    :clearable="item.options && item.options.clearable"
    :required="item.options && !isDetail && item.options.required"
    :rules="isDetail ? [] : rules"
    :border="false"
    :label-width="item.options?.labelPosition === 'top' ? '100%' : undefined"
    :label-align="(item.options && item.options.labelPosition) || undefined"
    :input-align="(item.options && item.options.inputAlign) || undefined"
    @click="onShowPicker"
  />
  <widget-form-item
    v-else
    :designer="designer"
    :widget-list="widgetList"
    :item="item"
    :rules="isDetail ? [] : rules"
    :index="index"
    :show-message="!isDetail"
  >
    <el-select
      v-if="!isDetail"
      v-model="fieldModel"
      value-key="value"
      style="flex: 1"
      :disabled="item.options && item.options.disabled"
      :placeholder="item.options && item.options.placeholder"
      :clearable="item.options && item.options.clearable"
    >
      <el-option v-for="(r, i) in item.options.optionItems" :key="i" :label="r.label" :value="r.value" />
    </el-select>
    <div v-else>{{ valueTxt }}</div>
  </widget-form-item>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      :columns="item.options.optionItems"
      :columns-field-names="customFieldName"
      :title="item.options.label"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>

<script>
import { ref, computed, watch } from 'vue'
import props from './props'
import field from './field'

export default {
  name: 'MSelect',
  props,
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const showPicker = ref(false)
    const valueTxt = ref('')

    const customFieldName = {
      text: 'label',
      children: 'children'
    }

    const options = computed(() => props.item.options)

    /** h5内容显示 */
    watch(
      () => props.modelValue,
      (val) => {
        if (val) {
          const item = options.value.optionItems.find((p) => p.value === val)
          if (item) {
            valueTxt.value = item.label || ''
          }
        } else {
          valueTxt.value = ''
        }
      },
      { immediate: true }
    )

    const onConfirm = ({ selectedOptions }) => {
      if (selectedOptions) {
        emit('update:modelValue', selectedOptions[0].value)
        valueTxt.value = selectedOptions[0].label
      }
      showPicker.value = false
    }

    const onShowPicker = () => {
      const { isDetail } = field(props, emit)
      if (!options.value.readonly && !options.value.disabled && !isDetail.value) {
        showPicker.value = true
      }
    }

    return {
      showPicker,
      valueTxt,
      customFieldName,
      onConfirm,
      onShowPicker,
      ...field(props, emit)
    }
  }
}
</script>
